<!--  -->
<template>
  <div class="ItemizedEnergyConsumption">
    <el-table style="width: 100%;height:200px;overflow-y: auto;" :data="dataList">
      <el-table-column prop="month" label="月份" align="center">
        <template #default="props">
         {{props.row.month}}
        </template>
      </el-table-column>
      <el-table-column prop="currentYearData" :label="year" align="center"></el-table-column>
      <el-table-column prop="previousYearData" :label="previousYear" align="center"></el-table-column>
      <el-table-column label="同比" align="center">
        <template #default="props">
          <svg-icon :icon-class="props.row.yearOnYearData>0?'up':'down'" :class="props.row.yearOnYearData>0?'up':'down'"/>
          <span :class="props.row.yearOnYearData>0?'up yearOnYearData':'down yearOnYearData'">{{ props.row.yearOnYearData }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

let component;
import moment from 'moment';

export default {
  data() {
    return {
      year: '',
      previousYear: '',
      dataList: [],
    };
  },
  methods: {
    getData(data, type) {
      this.queryParams.dateRange = data;
      this.queryParams.dateType = type;
      this.$emit('getData');
    }
  },
  mounted() {
    component = this;
  }
}

</script>
<style lang='scss'>
.ItemizedEnergyConsumption{
  padding: 3px 40px 3px 40px;
}
.up{
  color: #2b4ee5;
}
.down{
  color: #e32ca2;
}
</style>